<template>
	<div>
		<div class="breadcrumb_wrap">
			<span class="current">当前位置：</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/personalcenter' }">个人中心</el-breadcrumb-item>
				<el-breadcrumb-item>消息中心</el-breadcrumb-item>
				<el-breadcrumb-item>个人消息</el-breadcrumb-item>
				<el-breadcrumb-item>留言</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button style="position: absolute; right: 10px; top: 5px" type="primary" plain size="small"
				@click="toDoctorCertify">医生认证</el-button>
		</div>

		<div class="msg_list">
			<div class="msg_item" v-for="(item, index) in messageData" :key="index">
				<div class="user_line">
					<div style="display: flex; align-items: center">
						<el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
						</el-avatar>
						<span class="user_name">Amy Li</span>
						<span class="date">2021-09-18 18:00</span>
					</div>
					<div>
						<el-button @click="item.replay = !item.replay">回复</el-button>
					</div>
				</div>
				<div class="msg_content" v-for="(i, k) in item.content.slice(0, 3)" :key="k" v-show="!item.all">
					<span>
						<strong style="margin: 10px">{{ i.username }}</strong>
						<span>{{ i.content }}</span>
					</span>
					<strong>{{ i.date }}</strong>
				</div>
				<div class="msg_content" v-for="(i, k) in item.content" :key="k" v-show="item.all">
					<span>
						<strong style="margin: 10px">{{ i.username }}</strong>
						<span>{{ i.content }}</span>
					</span>
					<strong>{{ i.date }}</strong>
				</div>
				<a href="#" style="text-decoration: none; color: #333"
					@click="item.all = !item.all">{{ item.all ? "收起" : "查看全部" }}</a>
				<div v-show="item.replay" style="display: flex; align-items: center; margin: 10px 0">
					<el-input style="margin-right: 15px; width: 70%"></el-input>
					<el-button>发布</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "message",
		data() {
			return {
				tabsActive: "user",
				logo: require("@/assets/images/logo.jpg"),
				messageData: [{
						all: false,
						replay: false,
						content: [{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
						],
					},
					{
						all: false,
						replay: false,
						content: [{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
						],
					},
					{
						all: false,
						replay: false,
						content: [{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
						],
					},
					{
						all: false,
						replay: false,
						content: [{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
							{
								username: "admin",
								content: '"这是一个用户的消息提示信息11。"',
								date: "2020-12-12 03:00",
							},
						],
					},
				],
			};
		},
		// watch: {
		//   $route: {
		//     handler() {
		//       this.tabsActive = this.$route.query.tab;
		//     },
		//     deep: true,
		//   },
		// },
		mounted() {
			this.getMessageList(this.$cookies.get('userId'));
		},
		methods: {
			//跳转到医生认证
			toDoctorCertify() {
				this.$router.push("/doctorCertify");
			},
			async getMessageList(userId){
				const res = await this.$api.reqMessageList(userId);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.breadcrumb_wrap {
		width: 100%;
		height: 40px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 10px;
		box-sizing: border-box;

		.current {
			font-size: 14px;
		}
	}

	.msg_list {
		margin-top: 20px;

		.msg_item {
			background-color: #fff;
			width: 100%;
			padding: 10px;
			box-sizing: border-box; //!!!
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: 0;
			}

			.user_line {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user_name {
					color: #666;
					font-size: 16px;
					margin-left: 10px;
				}

				.date {
					color: #aaa;
					font-size: 14px;
					margin-left: 14px;
				}
			}

			.msg_content {
				color: #333;
				font-size: 14px;
				text-align: left;
				line-height: 30px;
			}
		}
	}
</style>
